<template>
	<view class="root">
		<view class="title">
			手机号登录
		</view>
		<uni-forms ref="form" :modelValue="formData">
			<uni-forms-item label="手机号" name="phone">
				<uni-easyinput required :inputBorder="false" type="text" name="phone" v-model="formData.phone"
					placeholder="请输入手机号" />
			</uni-forms-item>
			<view class="getCode" v-if="isGetCode" @click="getCode">
				获取验证码
			</view>
			<uni-forms-item label="验证码" name="code">
				<uni-easyinput required :inputBorder="false" type="text" name="code" v-model="formData.code"
					placeholder="请输入验证码" />
			</uni-forms-item>
			<button @click="submitForm">登录</button>
		</uni-forms>

		<view class="time" v-if="isTime">
			<uni-countdown color="#1D6FFF" :show-day="false" :show-hour="false" :show-minute="false"
				:second="timeupSecond" @timeup="timeup" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				longitude: null, //经度
				latitude: null, //纬度
				address: '', //地址信息
				formData: {
					phone: '13722379809',
					code: '5592'
				}, //表单数据
				timeupSecond: 30, //倒计时时间
				isTime: false, //倒计时时间显示
				isGetCode: true, //倒计时时间显示
				rules: {
					// 对phone字段进行必填验证
					phone: {
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '手机号不能为空',
							},
							//对name字段进行长度验证 
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请填写正确的手机号',
							},
						],
						validateTrigger: 'submitForm'
					},
					// 对password字段进行必填验证
					password: {
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '密码不能为空',
							},
							// 对name字段进行长度验证
							{
								minLength: 8,
								maxLength: 20,
								errorMessage: '密码位于8-20位之间',
							}
						],
						validateTrigger: 'submitForm'
					},
					// 对code字段进行必填验证
					code: {
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '验证码不能为空',
							},
							// 对name字段进行长度验证
							{
								minLength: 4,
								maxLength: 4,
								errorMessage: '验证码错误',
							}
						],
						validateTrigger: 'submitForm'
					}
				},
			}
		},
		methods: {
			//验证手机号
			validatePhone(rule, value, callback) {
				if (!/^1[3456789]\d{9}$/.test(value)) {
					callback(new Error('请填写正确的手机号'));
				} else {
					callback();
				}
			},
			//获取当前地址
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.x = res.longitude
						this.y = res.latitude
						getApp().globalData.longitude = res.longitude;
						getApp().globalData.latitude = res.latitude;
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + this.latitude +
								',' + this.longitude +
								'&key=UZEBZ-V2F3L-TDTPU-EP65I-CPZWK-OABGB',
							method: 'GET',
							success: (res) => {
								console.log(res)
								this.address = res.data.result.ad_info.city
							}
						})

						uni.showToast({
							title: '当前位置的经纬度：' + res.longitude + ',' + res
								.latitude,
							icon: 'success',
							mask: true
						})
					},
					fail(error) {
						uni.showToast({
							title: '请勿频繁调用！',
							icon: 'none',
						})
						console.log('失败', error)
					}
				})
			},
			getCode() {
				this.isGetCode = false;
				this.isTime = true;
				this.timeupSecond = 30;
				//获取登录验证码
				uni.request({
					url: "http://localhost:7000/auth/msg",
					method: 'POST',
					data: {
						mobile: this.formData.phone,
						resource: 0
					}
				})
			},
			//验证码倒计时
			timeup() {
				uni.showToast({
					title: "验证码已发送",
					duration: 3000
				})
				this.isGetCode = true;
				this.isTime = false;
				this.timeupSecond = 0
			},
			//表单提交
			submitForm(e) {
				this.$refs.form.validate().then(res => {
					uni.request({
						url: 'http://localhost:7000/auth/userLogin',
						method: 'POST',
						data: {
							mobile: this.formData.phone,
							code: this.formData.code
						},
						success: (resp) => {
							getApp().globalData.token = "Bearer " + resp.data.data.access_token
							uni.switchTab({
								url: '/pages/rescue/rescue'
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
		}
	}
</script>

<style scoped>
	//获取验证码
	.time,
	.getCode {
		width: 180rpx;
		height: 80rpx;
		color: #1D6FFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 15rpx;
		background-color: #e6e6e6;
		position: absolute;
		top: 385rpx;
		right: 10rpx;
		z-index: 9;
	}

	.uni-countdown {
		display: block;
		color: #1D6FFF;
		margin: auto;
	}

	.root {
		height: 100vh;
		background-color: white;
		position: relative;
	}

	.title {
		font-size: 55rpx;
		padding: 120rpx 0 100rpx 40rpx;
	}

	.uni-forms-item {
		border-bottom: 2rpx solid #cfcfcf;
		padding-left: 20rpx;
		margin: 30rpx 20rpx;
	}


	.uni-forms-item__label {
		width: 40rpx;
	}

	.uni-forms-item input {
		height: 100%;
	}

	button {
		width: 692rpx;
		height: 82rpx;
		color: white;
		margin-top: 150rpx;
		background-color: #1D6FFF;
	}
</style>